<template>
	<view class="container">
		<view class="aaa">
			<view class="Topbox" :style="'height:'+(Details_top-7)+'px'"></view>
			<!-- 头部定位 -->
		</view>
		<!-- 支付成功盒子 -->
		<view class="succeeded">
			<view></view>
			<view><u-icon name="checkbox-mark" color="white" size="70"></u-icon></view>
			<view>
				<view>本次支付成功</view>
				<view>￥500</view>
				<view>订单编号：1111111111111</view>
			</view>
			<view>
			<u-button type="primary">返回首页</u-button>
			<u-button type="success">查看订单</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Cachet
	} from "../../Components/Cephalic_capsule.js"
	export default {
		data() {
			return {
				Details_top: "",
				Details_bottom: "",
				Details_height: "",
				Details_width: "",
				Details_left: "",
				Details_right: "",

			}

		},
		onLoad() {
			this.Details_top = Cachet.top;
			this.Details_bottom = Cachet.bottom;
			this.Details_height = Cachet.height;
			this.Details_width = Cachet.width;
			this.Details_left = Cachet.left;
			this.Details_right = Cachet.right;
		},
		methods: {


		},
		onShow() {

		},
	}
</script>

<style scoped>
	.succeeded>view:nth-of-type(4){
		/* border: 1px solid gold; */
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}
	.succeeded>view:nth-of-type(3)>view:nth-of-type(2){
		font-weight: bolder;
		font-size: 50rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.succeeded>view:nth-of-type(3)>view:nth-of-type(1){
		color:  rgb(249, 154, 9);;
		font-weight: bolder;
		font-size: 40rpx;
	}
	.succeeded>view:nth-of-type(3){
		/* border: 1PX solid red; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.succeeded>view:nth-of-type(2){
		 margin:0 40%;
		 height: 150rpx ;
		 width: 150rpx;
		 background-color: rgb(249, 154, 9);
		 text-align: center;
		 line-height: 170rpx;
		 border-radius: 50%;
		 position: relative;
		 top: -80rpx;
	}
	.succeeded>view:nth-of-type(1){
		height: 300rpx;
		background-color: rgb(255, 180, 43);
		 border-radius: 0px 0px 50% 50%;
	}
	.succeeded{
		height: 900rpx;
		/* border: 1px solid blue; */
		margin-top:180rpx ;
	}
	.container{
		/* border: 1px solid blue; */
		height: 100rpx;
	}
	.aaa{
		position: fixed;
		z-index: 99;
		background-color: #ffffff;
		width: 100%;
		height: 170rpx;
		top: 0;
	}
	.Topbox{
		background-color: white;
	}

</style>
